<template>
  <el-container class="app-container" direction="vertical" style="padding:1vh 2vw">
    <el-row type="flex" justify="center">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-card class="el-card-carousel" style="border: none" :body-style="{ padding: '0px' }" shadow="hover">
          <el-carousel loop :interval="4000" indicator-position="outside" height="27vw" class="car">
            <el-carousel-item v-for="item in carouselsList" :key="item.id" >
              <img :src="item.url" style="width:100%;object-fit: cover;"/>
            </el-carousel-item>
          </el-carousel>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="25" style="margin-top: 2vh">
      <el-col v-for="item in filteredList" :key="item.id" :xs="24" :sm="12" :md="12" :lg="6" :xl="6" style="margin-top:10px;margin-bottom: 10px">
        <div @click="$router.push({ path: '/activity/detail', query: { id: item.id }})">
          <el-card shadow="always" style="border: #DCDFE6;" class="el-card__carousel">
            <div slot="header" class="clearfix" style="display: flex;margin: 12px 12px 8px ;justify-content:space-between">
              <el-tag class="el-tag-type" :type="item.type | typeFilter">{{ item.type }}</el-tag>
            </div>
            <el-container direction="vertical" style="color:#909399;font-size: 15px;margin: 10px 30px 10px 10px;">
              <el-col class="el-card-carousel__title" style="margin-bottom: 12px;font-size: 22px;font-family: 宋体,serif;color: #303133;font-weight: 600;line-height:24px;height:24px;overflow: hidden">
                {{ item.title }}
              </el-col>
<!--              <el-col style="margin-bottom: 8px">发布人: {{ getAdminName(item.number) }}</el-col>-->
              <el-col style="margin-bottom: 8px">发布时间: {{ timestampToTime(item.createdAt) }}</el-col>
              <el-col>活动地区: {{ item.zone }}</el-col>
            </el-container>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-row style="display: flex;justify-content: center;margin-top: 5vh">
      <el-col :xs="18" :sm="12" :md="12" :lg="8" :xl="6" style="display: flex;justify-content: center">
        <el-pagination
          v-show="total>0"
          background
          hide-on-single-page
          :current-page.sync="currentPage"
          :page-size="perPage"
          :pager-count="5"
          layout="prev, pager, next"
          @prev-click="change"
          @next-click="change"
          @current-change="change"
          :total="total">
        </el-pagination>
      </el-col>
    </el-row>
  </el-container>
</template>

<script>
import { indexActivities, itemActivity } from '@/api/admin/activity'
import {indexCarousels} from "@/api/admin/carousel";
import { indexUser } from '@/api/admin/user'
import logo1 from '@/assets/gcuLogo.png'
import logo2 from '@/assets/gcuLogo2.jpg'
import logo3 from '@/assets/gcuLogo3.png'

export default {
  filters: {
    typeFilter(type) {
      const typeMap = {
        '讲座学习': '',
        '就业讲座': '',
        '政治学习': 'danger',
        '志愿服务': 'danger',
        '社会实践': 'success',
        '校园文化': 'success',
        '文艺活动': 'warning',
        '学科竞赛': 'warning',
        '服务性劳动': 'warning'
      }
      return typeMap[type]
    }
  },
  data() {
    return {
      currentPage: 1,
      lastPage: 0,
      total: 0,
      perPage: 12,
      carouselsList: [
        { id: 0, name: 'food.png', url: logo1 },
        { id: 1, name: 'food2.jpeg', url: logo2 },
        { id: 2, name: 'food3.jpeg', url: logo3 }
      ],
      // bannerHeight: '',
      activitiesList: [],
    }
  },
  created() {
    // 从服务器端获取 活动列表
    this.currentPage = 1;
    this.getActivities();
  },
  computed: {
    // 过滤未开放的活动
    filteredList() {
      return this.activitiesList.filter(item => item.status !==0)
    }
  },
  //增加监听事件,当视口发生改变时,得到此时的图片高度赋值给bannerHeight
  // mounted() {
  //   this.imgload();
  //   window.addEventListener(
  //     "resize",
  //     () => {
  //       this.bannerHeight = this.$refs.bannerHeight[0].height;
  //       this.imgload();
  //     },
  //     false
  //   );
  // },
  methods: {
    // 自定义@load加载事件，页面渲染的时候就确保高度第一次渲染到页面
    // imgload(){
    //   this.$nextTick(() => {
    //     this.bannerHeight = this.$refs.bannerHeight[0].height
    //   })
    // },
    // 获取活动列表
    async getActivities() {
      const res = await indexActivities({page:this.currentPage})
      this.activitiesList = res.data.data
      this.currentPage = res.data.currentPage
      this.lastPage = res.data.lastPage
      this.total = res.data.total
      this.perPage = res.data.perPage
    },
    // 分页
    change(e) {
      this.currentPage = e;
      this.getActivities();
    },
    // 时间戳 转换为 时间单位
    timestampToTime(timestamp) {
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    // 根据用户学号 获取 用户姓名
    // getAdminName(number) {
    //   const res = indexUser({ number: number })
    //   console.log(res);
    //   return res.data?res.data.data.name:null;
    // },
    // 根据活动ID 获取活动剩余名额
    // getRemainder(id) {
    //   const res = itemActivity({id: id,status: 0})
    //   return res.data.data.count - res.data.total
    // },
  }
}
</script>

<style scoped lang="scss">
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.el-tag-type {
  height: 50px;
  line-height: 45px;
  padding: 0 24px;
  font-size: 16px;
  font-family: "微软雅黑 Light", serif;
  margin-left: 2px;
  //margin-left: 2px;
  //width: 110px;
  //padding-left: 24px;、
  // font-family: 黑体,serif;
}

.el-card:hover {
  box-shadow: #9accff;
  box-shadow: #E4E7ED;
}

.el-card__carousel:hover {
  // border: 2px solid #08f;
  -webkit-transform: translateY(-8px);
  transform: translateY(-10px);
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
}
</style>

<!--{-->
<!--id: 0,-->
<!--name: 'food.jpeg',-->
<!--url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'-->
<!--}, {-->
<!--id: 1,-->
<!--name: 'food2.jpeg',-->
<!--url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'-->
<!--}, {-->
<!--id: 2,-->
<!--name: 'food3.jpeg',-->
<!--url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'-->
<!--}-->
<!--{-->
<!--id: '1',
name: '张三',
zone: 'A9-404',
createdAt: '2024-03-13 11:12:28',
updatedAt: '2024-03-13 11:12:28',
deletedAt: '2024-03-13 11:12:28',
title: '粤剧演出志愿服务',
content: '活动内容：1. 参与演出，2. 协助组织，3. 协助宣传，4. 参与其他相关活动。',
firstImage: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
activityStart: '2024-03-13 11:12:28',
activityEnd: '2024-03-13 11:12:28',
enrollStart: '2024-03-13 11:12:28',
enrollEnd: '2024-03-13 11:12:28',
count: '100',
college: '计算机学院',
type: '学科竞赛',
status: '启用中'
}, {-->
<!--id: '2',-->
<!--name: '李四',-->
<!--zone: 'A9-402',-->
<!--createdAt: '2025-03-13 11:12:28',-->
<!--updatedAt: '2025-03-13 11:12:28',-->
<!--deletedAt: '2025-03-13 11:12:28',-->
<!--title: '粤剧演出志愿服务',-->
<!--content: '活动内容：1. 参与演出，2. 协助组织，3. 协助宣传，4. 参与其他相关活动。',-->
<!--firstImage: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',-->
<!--activityStart: '2024-03-13 11:12:28',-->
<!--activityEnd: '2024-03-13 11:12:28',-->
<!--enrollStart: '2024-03-13 11:12:28',-->
<!--enrollEnd: '2024-03-13 11:12:28',-->
<!--count: '100',-->
<!--college: '计算机学院',-->
<!--type: '服务性劳动',-->
<!--status: '启用中'-->
<!--}, {-->
<!--id: '3',-->
<!--name: '李四',-->
<!--zone: 'A9-402',-->
<!--createdAt: '2025-03-13 11:12:28',-->
<!--updatedAt: '2025-03-13 11:12:28',-->
<!--deletedAt: '2025-03-13 11:12:28',-->
<!--title: '粤剧演出志愿服务',-->
<!--content: '活动内容：1. 参与演出，2. 协助组织，3. 协助宣传，4. 参与其他相关活动。',-->
<!--firstImage: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',-->
<!--activityStart: '2024-03-13 11:12:28',-->
<!--activityEnd: '2024-03-13 11:12:28',-->
<!--enrollStart: '2024-03-13 11:12:28',-->
<!--enrollEnd: '2024-03-13 11:12:28',-->
<!--count: '100',-->
<!--college: '计算机学院',-->
<!--type: '社会实践',-->
<!--status: '启用中'-->
<!--}, {-->
<!--id: '4',-->
<!--name: '李四',-->
<!--zone: 'A9-402',-->
<!--createdAt: '2025-03-13 11:12:28',-->
<!--updatedAt: '2025-03-13 11:12:28',-->
<!--deletedAt: '2025-03-13 11:12:28',-->
<!--title: '粤剧演出志愿服务',-->
<!--content: '活动内容：1. 参与演出，2. 协助组织，3. 协助宣传，4. 参与其他相关活动。',-->
<!--firstImage: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',-->
<!--activityStart: '2024-03-13 11:12:28',-->
<!--activityEnd: '2024-03-13 11:12:28',-->
<!--enrollStart: '2024-03-13 11:12:28',-->
<!--enrollEnd: '2024-03-13 11:12:28',-->
<!--count: '100',-->
<!--college: '计算机学院',-->
<!--type: '志愿服务',-->
<!--status: '启用中'-->
<!--}, {-->
<!--id: '5',-->
<!--name: '李四',-->
<!--zone: 'A9-402',-->
<!--createdAt: '2025-03-13 11:12:28',-->
<!--updatedAt: '2025-03-13 11:12:28',-->
<!--deletedAt: '2025-03-13 11:12:28',-->
<!--title: '粤剧演出志愿服务',-->
<!--content: '活动内容：1. 参与演出，2. 协助组织，3. 协助宣传，4. 参与其他相关活动。',-->
<!--firstImage: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',-->
<!--activityStart: '2024-03-13 11:12:28',-->
<!--activityEnd: '2024-03-13 11:12:28',-->
<!--enrollStart: '2024-03-13 11:12:28',-->
<!--enrollEnd: '2024-03-13 11:12:28',-->
<!--count: '100',-->
<!--college: '计算机学院',-->
<!--type: '就业讲座',-->
<!--status: '启用中'-->
<!--}-->

<!--// const defaultActivity = {-->
<!--//   id: undefined,-->
<!--//   createdAt: '',-->
<!--//   updatedAt: '',-->
<!--//   deletedAt: '',-->
<!--//   number: '',-->
<!--//   title: '',-->
<!--//   zone: '',-->
<!--//   type: '',-->
<!--//   content: '',-->
<!--//   firstImage: '',-->
<!--//   activityStart: '',-->
<!--//   activityEnd: '',-->
<!--//   enrollStart: '',-->
<!--//   enrollEnd: '',-->
<!--//   count: '',-->
<!--//   college: '',-->
<!--//   status: '',-->
<!--//   isOpen: ''-->
<!--// }-->

<!--{-->
<!--id: '1',-->
<!--name: '张三',-->
<!--zone: 'A9-404',-->
<!--createdAt: '2024-03-13 11:12:28',-->
<!--updatedAt: '2024-03-13 11:12:28',-->
<!--deletedAt: '2024-03-13 11:12:28',-->
<!--title: '粤剧演出志愿服务',-->
<!--content: '活动内容：1. 参与演出，2. 协助组织，3. 协助宣传，4. 参与其他相关活动。',-->
<!--firstImage: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',-->
<!--activityStart: '2024-03-13 11:12:28',-->
<!--activityEnd: '2024-03-13 11:12:28',-->
<!--enrollStart: '2024-03-13 11:12:28',-->
<!--enrollEnd: '2024-03-13 11:12:28',-->
<!--count: '100',-->
<!--college: '计算机学院',-->
<!--type: '学科竞赛',-->
<!--status: '启用中'-->
<!--}-->

<!--{-->
<!--id: '1',-->
<!--name: '张三',-->
<!--zone: 'A9-404',-->
<!--createdAt: '2024-03-13 11:12:28',-->
<!--updatedAt: '2024-03-13 11:12:28',-->
<!--deletedAt: '2024-03-13 11:12:28',-->
<!--title: '粤剧演出志愿服务',-->
<!--content: '活动内容：1. 参与演出，2. 协助组织，3. 协助宣传，4. 参与其他相关活动。',-->
<!--firstImage: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',-->
<!--activityStart: '2024-03-13 11:12:28',-->
<!--activityEnd: '2024-03-13 11:12:28',-->
<!--enrollStart: '2024-03-13 11:12:28',-->
<!--enrollEnd: '2024-03-13 11:12:28',-->
<!--count: '100',-->
<!--college: '计算机学院',-->
<!--type: '学科竞赛',-->
<!--status: '启用中'-->
<!--}-->
